<template>
    <div class="app-container"  >
        <el-row :gutter="20" style="padding:0 19px;" class="parent">
            <el-col :span="3.5"  v-for="(dep,index) in deptList" class="child"   :key=" dep.deptId" style="margin:0 0 18px 0;text-align:center;" >
                <!-- <el-card body-style="text-align:center;line-height:100px;"  > -->
            <div>

                <div class="tip" >{{index+1}}</div>
            <el-button style="font-size:20px;width:100%;height:100px;padding:3px;margin:0px; background-color:#32c8c9 ;color: #fff;text-wrap:wrap;" @click="jump(dep)"> {{dep.deptName}}    </el-button>

            </div>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import { listDepts } from "@/api/system/depts";
import { listData} from "@/api/system/dict/data";

export default {
 name: "ship",
 async created() {
   await  this.getConfig();
     console.log(this.fish_no)
     if(this.fish_no=='6000')
     {
       this.getDeptList();
      }else{
       this.getCharts();
     }

 },
 methods:{
  async getConfig(){
     await  this.getConfigKey("sys.server.version").then((response) => {

        this.fish_no = response.msg  ||"6000"
         console.log(response)

      });

    },
  async getCharts(){
    let dictType="regional_real_ship_mapping";
    let   pageNu=1
    let   pageSize=100;
    await listData({dictType,pageNu,pageSize}).then(response => {
      console.log(response)
        let data = response.rows;
       this.deptList = data.map(c=>{
          let item={};
          item.deptCode=c.dictValue
          item.deptName=c.dictLabel;
          item.url=c.remark
          return item;
        })
        console.log(this.deptList)
        // this.total = response.total;
      });
  },

   getDeptList() {
     this.loading = true;
     this.queryParams.orderByColumn = "deptCode";
     this.queryParams.isAsc ="ascending";
       listDepts(this.queryParams).then((response) => {
       if(response.rows){
        let datas = response.rows;
            this.deptList =  datas.filter(item=>{
                // let f =this.inDepts.some(v=>v==item.deptCode)
                // console.log("=======",f)
                return this.inDepts.some(v=>v==item.deptCode)
            })
            this.deptList.forEach(item=>{
              if(item.deptCode=="14"){
                console.log(111)
                item.deptName="左轴系"
              }else if(item.deptCode=="15"){
                item.deptName="右轴系"
              }else if(item.deptCode=="10"){
                item.deptName="左舵机、右舵机"
              }
            })
            console.log(this.deptList)
       }
       this.total = this.deptList.total;
       this.loading = false;
     });
   },

   jump(v){
    let deptCode=v.deptCode
    if(this.fish_no=='6000'){
      switch (deptCode) {
        case '01': //左主机；NO.1主机
            this.$router.push({ path:"/monitorShip/mainLeft", query:{"depCode":deptCode}})
            break;
        case '03': //1号发电机组
        this.$router.push({ path:"/monitorShip/eleGroup", query:{"depCode":deptCode,name:"1号发电机组"}})
        break;

        case '05'://主配电板
            // console.log(111,"uuu")
            this.$router.push({ path:"/monitorShip/mainBoard", query:{"depCode":deptCode}})
            break;

        case '07': //右主机；NO.2主机
            this.$router.push({ path:"/monitorShip/mainLeft", query:{"depCode":deptCode}})
            break;

        case '09': //2号发电机组
          this.$router.push({ path:"/monitorShip/eleGroup", query:{"depCode":deptCode,name:"2号发电机组"}})
          break;
        case '10': //左右舵机
        this.$router.push({ path:"/monitorShip/helm", query:{"depCode":deptCode,name:"左右舵机"}})
        break;
        case '11': //应急配电板
        this.$router.push({ path:"/monitorShip/emergencyBoard", query:{"depCode":deptCode,name:"应急配电板"}})
        break;
        case '12': //液位测量
        this.$router.push({ path:"/monitorShip/measure", query:{"depCode":deptCode,name:"液位测量"}})
        break;
        case '13': //应急停泊发电机组
          this.$router.push({ path:"/monitorShip/eleGroup", query:{"depCode":deptCode,name:"应急停泊发电机组"}})
          break;

        case '14': //左轴系
        this.$router.push({ path:"/monitorShip/leftAxis", query:{"depCode":deptCode,name:"左轴系"}})
        break;
        case '15': //右轴系
        this.$router.push({ path:"/monitorShip/rightAxis", query:{"depCode":deptCode,name:"右轴系"}})
        break;
        default:
            break;
      }
    }else{
      let urs =v.url.split(";")
      let params ={};
      params.depCode=deptCode
      if(urs.length>1){
        params.type=urs[1];
        }
        if(urs.length>2){
          params.graphId=urs[2]
        }
        console.log(urs[0],params);
        this.$router.push({ path:urs[0],query:params})

    }

   },
 },
 data(){
   return{
      fish_no:"6000",
       inDepts:["01","03","05","07","09","10","11","12","13","14","15"],
       deptList: [],
       loading :false,
       total: 0,
        // 查询参数
        queryParams: {
           pageNum: 1,
           pageSize: 2000,
        }
 }
}
}
</script>
<style scoped>


.tip {
 margin: 2px;
   padding: 1px;
   color: rgb(52 88 124 / 75%);

   border-radius: 20% 0% 40% 0%;
   background-color: rgb(122 132 216 / 19%);
   position: absolute;float:left;margin: 2px;
}

.el-row {
   margin-bottom: 20px;

 }
 .el-col {
   border-radius: 4px;
 }
 .bg-purple-dark {
   background: #99a9bf;
 }
 .bg-purple {
   background: #d3dce6;
 }
 .bg-purple-light {
   background: #e5e9f2;
 }
 .grid-content {
   border-radius: 4px;
   min-height: 36px;
 }

.parent {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
}
.child{
 flex-basis: 20%;
}
</style>
